import 'package:flutter/material.dart';
import 'package:ball_lion/utils/toast_utils.dart';
import 'package:ball_lion/widgets/base/wqs_text.dart';
import 'package:ball_lion/widgets/gif.dart';

import 'package:ball_lion/server/api/user_api.dart';
import 'package:ball_lion/utils/utils.dart';

class MatchSupportWidget extends StatefulWidget {
  //home左 guest右
  String homeInter;
  String guestInter;
  int homeInterCount;
  int guestInterCount;
  bool isInter;
  int matchId;
  int homeId;
  int guestId;
  MatchSupportWidget(
      this.homeInter,
      this.guestInter,
      this.homeInterCount,
      this.guestInterCount,
      this.isInter,
      this.matchId,
      this.homeId,
      this.guestId,
      {super.key});

  @override
  State<MatchSupportWidget> createState() => _MatchSupportWidgetState();
}

class _MatchSupportWidgetState extends State<MatchSupportWidget> {
  bool leftAnim = false;
  bool rightAnim = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          GestureDetector(
            onTap: () {
              supportTeam(true);
            },
            child: Container(
                width: 54,
                height: 22,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        fit: BoxFit.fill,
                        image: AssetImage(
                            Utils.getImgPath('team_support_left_bg.png')))),
                child: Stack(
                  children: [
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        SizedBox(width: 4),
                        Image.asset(
                          Utils.getImgPath('team_support_left.png'),
                          width: 12,
                          color:
                              widget.isInter ? Color(0xFFACC2FD) : Colors.white,
                        ),
                        SizedBox(width: 2),
                        QsText(
                          widget.homeInter,
                          fontSize: 12,
                          color:
                              widget.isInter ? Color(0xFFACC2FD) : Colors.white,
                        ),
                        Spacer()
                      ],
                    ),
                    if (leftAnim)
                      Positioned(
                        left: 0,
                        top: 0,
                        bottom: 0,
                        child: GifWidget(
                            width: 22,
                            height: 22,
                            asset: 'support_left.gif',
                            duration: Duration(milliseconds: 300)),
                      )
                  ],
                )),
          ),
          Expanded(
            child: LinearProgressIndicator(
                minHeight: 4,
                value:
                    (widget.homeInterCount == 0 && widget.guestInterCount == 0)
                        ? 0.5
                        : (widget.homeInterCount.toDouble() /
                            (widget.homeInterCount.toDouble() +
                                widget.guestInterCount.toDouble())),
                backgroundColor: Color(0xFFFED07F),
                color: Color(0xFF82A5F0)),
          ),
          GestureDetector(
            onTap: () {
              supportTeam(false);
            },
            child: Container(
                width: 54,
                height: 22,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        fit: BoxFit.fill,
                        image: AssetImage(
                            Utils.getImgPath('team_support_right_bg.png')))),
                child: Stack(
                  children: [
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Spacer(),
                        QsText(widget.guestInter,
                            fontSize: 12,
                            color: widget.isInter
                                ? Color(0xFFFFE2B1)
                                : Colors.white),
                        SizedBox(width: 2),
                        Image.asset(Utils.getImgPath('team_support_right.png'),
                            width: 12,
                            color: widget.isInter
                                ? Color(0xFFFFE2B1)
                                : Colors.white),
                        SizedBox(width: 4),
                      ],
                    ),
                    if (rightAnim)
                      Positioned(
                        right: -1,
                        top: 0,
                        bottom: 0,
                        child: GifWidget(
                            width: 22,
                            height: 22,
                            asset: 'support_right.gif',
                            duration: Duration(milliseconds: 700)),
                      )
                  ],
                )),
          ),
        ],
      ),
    );
  }

  supportTeam(bool isLeft) async {
    if (widget.isInter == true) {
      Toast.text('您已支持过球队~');
      return;
    }
    widget.isInter = true;
    if (isLeft) {
      leftAnim = true;
      setState(() {});
      Future.delayed(Duration(milliseconds: 700), () {
        leftAnim = false;
        setState(() {});
      });
    } else {
      rightAnim = true;
      setState(() {});
      Future.delayed(Duration(milliseconds: 700), () {
        rightAnim = false;
        setState(() {});
      });
    }
    final c = await UserApi.supportTeam(
        teamId: isLeft ? widget.homeId : widget.guestId,
        matchId: widget.matchId);
    if (c == 200) {
      if (isLeft) {
        widget.homeInterCount++;
      } else {
        widget.guestInterCount++;
      }
      double barPercent = 0;
      if (widget.guestInterCount == 0 && widget.homeInterCount == 0) {
        barPercent = 0.5;
      } else {
        barPercent = widget.homeInterCount.toDouble() /
            (widget.guestInterCount + widget.homeInterCount).toDouble();
      }
      double rightPercent = 1 - barPercent;
      widget.homeInter = '${(barPercent * 100).toInt()}%';
      widget.guestInter = '${(rightPercent * 100).toInt()}%';
      setState(() {});
    } else {
      widget.isInter = false;
      setState(() {});
    }
  }
}
